import React, { useState, useRef, useEffect } from 'react';
import { View, Text } from '@tarojs/components';
import { PullToRefresh, VirtualList, InfiniteScroll, NavBar, Image, Tag, Icon, Button } from '@antmjs/vantui';
import Taro, { getMenuButtonBoundingClientRect } from '@tarojs/taro';
import { getmyCollectionapp } from '../../../../https/mine'
import { HOST, diffTime, getUserInfo } from '../../../../utils/const'
import './index.scss'

const pla = { android: "安卓", ios: "苹果", windows: "windows", mac: 'mac' }

export default function AppVersionList() {
    const btn = getMenuButtonBoundingClientRect();

    const [data, setData] = useState([]);
    const [collectionList, setCollectionList] = useState([])
    const infiniteScrollRef = useRef();
    const virtualListRef = useRef();

    useEffect(() => {
        getcollectionList()
    }, [])

    const getcollectionList = () => {
        Taro.showLoading({ title: '加载中' })
        getmyCollectionapp({ userId: getUserInfo()?.user_id, }).then((res) => {
            Taro.hideLoading()
            if (res.success) {
                setCollectionList(res?.data)
            }
        })
    }

    return (
        <View className='mycoins-frame-view'>
            <NavBar title='我的收藏' leftArrow leftText={'返回'} onClickLeft={() => Taro.navigateBack()} fixed />
            <View style={{ paddingTop: btn.bottom + 20 }}>
                <PullToRefresh >
                    <VirtualList
                        style={{ padding: 10, boxSizing: 'border-box' }}
                        height="calc(100vh - 135px)"
                        dataSource={collectionList}
                        showCount={3}
                        ref={virtualListRef}
                        // footer={
                        //     <InfiniteScroll
                        //         parentClassName="van-virtual-list"
                        //         loadMore={loadMore}
                        //         ref={infiniteScrollRef}
                        //     />
                        // }
                        ItemRender={({ item }) => {
                            return (
                                <View className='list-bg-view' onClick={() => Taro.navigateTo({ url: `/pages/home/components/app_detail/index?id=${item.id}&version=${item.version}` })} >
                                    <View className='img'>
                                        <Image src={HOST + item?.icon} radius={'8%'} width={120} height={120} />
                                    </View>
                                    <View className='info-text'>
                                        <View>
                                            {item?.name || ''}
                                        </View>
                                        <View className='tag-view'>
                                            <Icon name="star" color="#13b858" size={40} />
                                            <Text className="star-text">{item?.core || ''}</Text>
                                            <View className='version-view'>{item?.version || ''}</View>
                                            <View className='version-view'>{item?.create_time ? diffTime(new Date(item?.create_time).getTime()) : '未知'}</View>
                                        </View>
                                        <View className='tag-view'>
                                            <Tag className='tag' type="primary">{item?.platform ? pla[item.platform] : ''}</Tag>
                                            <View className='version-view'>{item?.size || ''}</View>
                                            <View className='separate-veiw'>·</View>
                                            <View className='version-view'>200下载</View>
                                        </View>
                                    </View>
                                    <View className='time-view'>
                                        <Button
                                            onClick={() => Taro.navigateTo({ url: `/pages/home/components/down_load_file/index?link=${item?.link}` })}
                                            className='btn' type='primary' size='mini'>下载</Button>
                                    </View>
                                </View>
                            );
                        }}
                    />
                </PullToRefresh>
            </View>
        </View>
    );
}